<template>
  <div class="phase">
    <!-- 搜索 -->
    <div class="search">
      <div>
        <el-form :inline="true" :model="searchPhaseForm" class="demo-form-inline">
          <el-form-item label="相位编号">
            <el-input v-model.number="searchPhaseForm.phase_num" placeholder="请输入编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="灯驱板">
            <el-select v-model.number="searchPhaseForm.lamp_num" placeholder="请选择" clearable>
              <el-option v-for="item in channels" :key="item[0]" :label="item[1]" :value="item[0]" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onAdd" icon="el-icon-plus">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 列表 -->
    <el-table :data="phases" border style="width: 100%">
      <el-table-column prop="phase_num" label="相位编号" align="center" width="80"></el-table-column>
      <el-table-column prop="lamp_num" label="灯驱板" align="center" width="70">
        <template slot-scope="scope">
          {{
            scope.row.lamp_num | ChannelFilter
          }}
        </template>
      </el-table-column>
      <el-table-column prop="direction" label="方向" align="center" width="70">
        <template slot-scope="scope">
          {{
            scope.row.direction | DirectionFilter
          }}{{ scope.row.flow | FlowFilter }}
        </template>
      </el-table-column>
      <el-table-column prop="green" label="绿灯" align="center" width="60"></el-table-column>
      <el-table-column prop="yellow" label="黄灯" align="center" width="60"></el-table-column>
      <el-table-column prop="red" label="全红" align="center" width="60"></el-table-column>
      <el-table-column prop="min_green" label="最小绿" align="center" width="65"></el-table-column>
      <el-table-column prop="security_green" label="安保绿" align="center" width="65"></el-table-column>
      <el-table-column prop="security_green_flash" label="安保绿闪" align="center" width="80"></el-table-column>
      <el-table-column prop="security_yellow" label="安保黄灯" align="center" width="80"></el-table-column>
      <el-table-column prop="security_red" label="安保全红" align="center" width="80"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-delete" type="primary" size="mini" @click="del(scope.row)">删除</el-button>
          <el-button icon="el-icon-edit" type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页-->
    <el-pagination
      small
      layout="prev, pager, next"
      :total="total"
      @current-change="page"
      @prev-click="page"
      @next-click="page"
    ></el-pagination>
    <!-- 新增弹框 -->
    <el-dialog
      title="新增"
      :visible.sync="addPhaseDialog"
      :close-on-click-modal="false"
      width="700px"
      append-to-body
      @close="cancel"
    >
      <el-form ref="addPhaseFormRef" :model="addPhaseForm" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="相位编号" prop="phase_num">
              <el-input v-model.number="addPhaseForm.phase_num" placeholder="编号范围 1-64" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="灯驱板">
              <el-select v-model.number="addPhaseForm.lamp_num" placeholder="请选择">
                <el-option
                  v-for="item in channels"
                  :key="item[0]"
                  :label="item[1]"
                  :value="item[0]"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="方向">
              <el-select v-model.number="addPhaseForm.direction" placeholder="请选择">
                <el-option
                  v-for="item in directions"
                  :key="item[0]"
                  :label="item[1]"
                  :value="item[0]"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流向">
              <el-select v-model.number="addPhaseForm.flow" placeholder="请选择">
                <el-option v-for="item in flows" :key="item[0]" :label="item[1]" :value="item[0]" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="绿灯时间">
              <el-input v-model.number="addPhaseForm.green" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="黄灯时间">
              <el-input v-model.number="addPhaseForm.yellow" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="红灯时间">
              <el-input v-model.number="addPhaseForm.red" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最小绿">
              <el-input v-model.number="addPhaseForm.min_green" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="安保绿灯">
              <el-input v-model.number="addPhaseForm.security_green" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安保绿闪">
              <el-input v-model.number="addPhaseForm.security_green_flash" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安保黄灯">
              <el-input v-model.number="addPhaseForm.security_yellow" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安保红灯">
              <el-input v-model.number="addPhaseForm.security_red" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitAddPhaseForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹框 -->
    <el-dialog
      title="编辑"
      :visible.sync="editPhaseDialog"
      :close-on-click-modal="false"
      width="700px"
      append-to-body
      @close="editCancel"
    >
      <el-form ref="editPhaseFormReeditPhaseForm" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="相位编号" prop="phase_num">
              <el-input v-model.number="editPhaseForm.phase_num" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="灯驱板">
              <el-select v-model.number="editPhaseForm.lamp_num">
                <el-option
                  v-for="item in channels"
                  :key="item[0]"
                  :label="item[1]"
                  :value="item[0]"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="方向">
              <el-select v-model.number="editPhaseForm.direction" placeholder="请选择">
                <el-option
                  v-for="item in directions"
                  :key="item[0]"
                  :label="item[1]"
                  :value="item[0]"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流向">
              <el-select v-model.number="editPhaseForm.flow" placeholder="请选择">
                <el-option v-for="item in flows" :key="item[0]" :label="item[1]" :value="item[0]" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="绿灯时间">
              <el-input v-model.number="editPhaseForm.green" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="黄灯时间">
              <el-input v-model.number="editPhaseForm.yellow" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="红灯时间">
              <el-input v-model.number="editPhaseForm.red" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最小绿">
              <el-input v-model.number="editPhaseForm.min_green" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="安保绿灯">
              <el-input v-model.number="editPhaseForm.security_green" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安保绿闪">
              <el-input v-model.number="editPhaseForm.security_green_flash" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安保黄灯">
              <el-input v-model.number="editPhaseForm.security_yellow" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安保红灯">
              <el-input v-model.number="editPhaseForm.security_red" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCancel">取 消</el-button>
        <el-button type="primary" @click="submitEditPhaseForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import db from "../util/db3.js";
import { channelEnum, flowEnum, directionEnum } from "@/util/ComEnum.js";
export default {
  name: "Phase",
  data() {
    return {
      phases: [],
      searchPhaseForm: {},
      channels: [...channelEnum],
      flows: [...flowEnum],
      directions: [...directionEnum],
      addPhaseDialog: false,
      editPhaseDialog: false,
      addPhaseForm: {},
      editPhaseForm: {},
      // 当前页
      currentPage: 1,
      total: 0,
      rows: 10
    };
  },
  mounted() {
    this.findPhaseList();
  },
  methods: {
    findPhaseList() {
      let sql = `
      SELECT
        p.*,
        s.security_green,
        s.security_green_flash,
        s.security_yellow,security_red,
        l.direction,
        l.flow
      FROM
        phase p
      JOIN security s ON s.phase_num=p.phase_num
      JOIN lamp l ON p.lamp_num=l.lamp_num
      `;

      let count_sql = `
      SELECT
        count(1) as total
      FROM
        phase p
      JOIN security s ON s.phase_num=p.phase_num
      JOIN lamp l ON p.lamp_num=l.lamp_num
      `;

      let where = "";
      if (this.searchPhaseForm.phase_num) {
        where = `where p.phase_num = ${this.searchPhaseForm.phase_num}`;
      }

      if (this.searchPhaseForm.lamp_num) {
        if (where.startsWith("where")) {
          where += ` and p.lamp_num = ${this.searchPhaseForm.lamp_num}`;
        } else {
          where = `where p.lamp_num = ${this.searchPhaseForm.lamp_num}`;
        }
      }

      let offset = (this.currentPage - 1) * this.rows
      let limit = `limit ${offset} , ${this.rows}`
      let a = count_sql + ';' + sql + where + limit + ';'
      db.multi(a, (error, result) => {
        console.log('res=', result);
        this.total = result[0][0].total
        this.phases = result[1]
      })
    },
    onSearch() {
      this.findPhaseList();
    },
    onAdd() {
      this.addPhaseDialog = true;
    },
    submitAddPhaseForm() {
      // 相位
      let phase_sql = `
      INSERT INTO phase(cross_number, phase_num, lamp_num, green, yellow, red, min_green)
      VALUES (1,${this.addPhaseForm.phase_num},${this.addPhaseForm.lamp_num},${this.addPhaseForm.green},
      ${this.addPhaseForm.yellow},${this.addPhaseForm.red},${this.addPhaseForm.min_green});
      `;

      // 灯组
      let lamp_sql = `
      INSERT INTO lamp (cross_number, lamp_num, direction, flow)
      VALUES (1, ${this.addPhaseForm.lamp_num}, ${this.addPhaseForm.direction}, ${this.addPhaseForm.flow});`;

      // 安保
      let security_sql = `
      INSERT INTO security (cross_number, phase_num, security_green, security_green_flash, security_yellow, security_red)
      VALUES (1, ${this.addPhaseForm.phase_num},${this.addPhaseForm.security_green},${this.addPhaseForm.security_green_flash},${this.addPhaseForm.security_yellow},
      ${this.addPhaseForm.security_red});
      `;

      db.multi(phase_sql + lamp_sql + security_sql, (error, result) => {
        if (error) throw error
        this.addPhaseDialog = false;
        this.$message({ type: 'success', message: '操作成功' })
        this.findPhaseList()
      })
    },
    submitEditPhaseForm() { },
    cancel() {
      this.addPhaseDialog = false;
      this.addPhaseForm = {};
    },
    editCancel() {
      this.editPhaseDialog = false;
      this.editPhaseForm = {};
    },
    edit(row) {
      this.editPhaseDialog = true;
      this.editPhaseForm = row;
    },
    del() {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
    page(n) {
      this.currentPage = n
      this.findPhaseList()
    }
  },
};
</script>
<style lang="less" scoped>
.phase {
  display: flex;
  flex-direction: column;
  .search {
    height: 50px;
  }

  .el-table {
    flex: 1;
  }
}

::v-deep .el-form-item {
  margin: 5px 10px;
}

::v-deep .el-input__inner {
  padding: 0 10px;
}
// .elSelect {
//   width: 220px;
// }
</style>
